//  document文档对象 顶级的 dom 树
// dom事件监听
const panels = document.querySelectorAll('.panel');
/* console.log(panels,
    panels[0],
    typeof panels[0],
    Object.prototype.toString.call(panels[0])
);
 */
/* panels.forEach(function( panel ){
    panel.addEventLister('click',function(){
        panel.classList.add('active');

    })
}) */
panels.forEach(function(panel) {
  // console.log(panel);
  // 事件监听需要在具体元素上
  panel.addEventListener('click', function() {
    // 点击当前项添加 active 类名
    const cur = document.querySelector('.active');
    if(cur){
        cur.classList.remove('active');
    }
    panel.classList.add('active');
  })
})